<template>
  <div class="ImageLoader_con">
    <!-- 遮罩层 -->
    <img
      class="placeholderImg"
      :src="placeholder"
      style="filter: blur(1px)"
      v-if="!imgIsHide"
    />
    <!-- 正式图片 -->
    <img
      class="orgin"
      :src="src"
      @load="imgDone"
      :style="{
        opacity: imgIsLoadOK ? 1 : 0,
        transition: `.1s`,
      }"
    />
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  data() {
    return {
      imgIsLoadOK: false,
      imgIsHide: false,
    };
  },
  props: {
    src: {
      type: String,
      required: true,
    },
    placeholder: {
      type: String,
      required: true,
    },
    transitionMs: {
      type: Number,
      default: 1000,
    },
  },
  setup(prop, ctx) {
    let src = ref(prop.src);
    let placeholder = ref(prop.placeholder);
    let transitionMs = ref(prop.transitionMs);
    let imgIsLoadOK = ref(false);
    let imgIsHide = ref(false);
    let imgDone = () => {
      imgIsLoadOK.value = true;
      setTimeout(() => {
        imgIsHide.value = true;
      }, transitionMs.value);
      ctx.emit("load");
    };
    return { imgDone, src, placeholder, transitionMs, imgIsLoadOK, imgIsHide };
  },
};
</script>

<style lang="less">
.ImageLoader_con {
  width: 100%;
  height: 100%;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>